<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";
import { getMonthlyGrowth } from "@/api/system/system.js";
const chartContainer = ref(null);

onMounted(async () => {
  try {
    let namelist = [];
    let datalist = [];
    const response = await getMonthlyGrowth(); // 替换成你的API地址
    const chartData = response.data;
    chartData.forEach(item => {
      namelist.push(item.name);
      datalist.push(item.value);
    });
    const myChart = echarts.init(chartContainer.value);
    const option = {
      title: {
        text: "月患者新增数量",
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      grid: {
        left: "2%", // 调整这个值可以改变左侧空白大小
        top: "20%",
        bottom: "1%",
        containLabel: true // 确保包含坐标轴标签
      },
      xAxis: {
        type: "category",
        data: namelist,
        splitLine: {
          show: false // 隐藏x轴的分割线（垂直网格线）
        },
        boundaryGap: false, // 关键配置：让每个标签对齐一个刻度
        axisLabel: {
          align: "center" // 确保文字居中显示在刻度下
        }
      },
      yAxis: {
        splitLine: {
          show: true // 如果你也想隐藏y轴的分割线（水平网格线），可以将此项设为false
        },
        axisLine: {
          show: true // 隐藏y轴的坐标轴线
        }
      },
      series: [
        {
          name: "",
          type: "bar",
          data: datalist,
          barWidth: "30%" // 设置柱子的宽度，这里设置为分类间隔的30%
        }
      ]
    };
    myChart.setOption(option);
  } catch (error) {
    console.error("获取数据失败", error);
  }
});
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>
